<template>
<view>
<view>
  <view class="body">
    <view class="top">
      <!-- 顶部信息包括顶部导航栏 -->
      <view class="head">
        <!-- 顶部title -->
        <view class="title">
          <view class="title-text">{{ workName }}</view>
          <view class="city">
            <picker mode="selector" :range="citylist" @change="pickCity" range-key="cityname" :value="cityIndex">
              <view class="flex center">
                <image src="http://imgbdb3.bendibao.com/whbdb/20213/22/20210322220416_44308.png" class="city-icon" mode="widthFix"></image>
                <view v-if="citylist[cityIndex]">{{ citylist[cityIndex].cityname }}</view>
              </view>
            </picker>
          </view>
        </view>
        <!-- /顶部title -->

        <!-- 顶部导航栏 -->
        <view class="tab-bar flex">
          <view v-for="(item, index) in workType" :key="index" :class="'bar-item ' + ( workTypeIndex == index?'chouse': '' )" @tap="changeType" :data-index="index" :data-id="item.id">
            <text>{{ item.title }}</text>
          </view>
        </view>
        <!-- /顶部导航栏 -->
      </view>
      <!-- /顶部信息包括顶部导航栏 -->

      <!-- 内容主体部分 -->
      <view class="main-box">
        <!-- 主体导航栏，切换办事指南和材料清单 -->
        <view class="tab-bar flex">
          <view :class="'bar-item ' + (infoIndex == 0?'chouse':'')" @tap="changeInfoIndex" data-index="0">办事指南</view>
          <view :class="'bar-item ' + (infoIndex == 1?'chouse':'')" @tap="changeInfoIndex" data-index="1">材料清单</view>
        </view>
        <!-- /主体导航栏，切换办事指南和材料清单 -->

        <!-- 办事指南列表 -->
        <view class="guide-list" v-if="infoIndex == 0">
          <block v-if="info.condition.content||info.process.child || info.process.content||info.timeCost.content||webInfo.length||info.questions.child">
            <!-- 办理条件 -->
            <view class="guide-item condition" v-if="info.condition.content">
              <view class="guide-title" @tap="showDetail" data-type="condition">
                <text class="chouse" v-if="guide.condition.show">办理条件</text>
                <text v-else>办理条件</text>
                <image src="http://imgbdb3.bendibao.com/whbdb/20213/22/20210322220335_23184.png" mode="widthFix" :class="'arrow ' + (guide.condition.show? 'rotate':'')"></image>
              </view>
              <view class="guide-content" v-if="guide.condition.show">
                <!-- <view wx:if="guide.condition.showAll">
							<view wx:for="(item, index) in info.condition.content" wx:key="index">
								<rich-text :nodes="item.value" wx:if="index < 3"></rich-text>
							</view>
						</view> -->
                <view class="content-border">
                  <view v-for="(item, index) in info.condition.content" :key="index">
                    <!-- <rich-text :nodes="item.value"></rich-text> -->
                    <mp-html :content="item.value" ref="article" @linktap="linkTap" :copy-link="false" :selectable="true">
                    </mp-html>
                  </view>
                </view>
                <!-- <view wx:else>
							<view wx:for="(item, index) in info.condition.content" wx:key="index"><rich-text :nodes="item.value"></rich-text></view>
						</view> -->
                <!-- <view class="show-all" class="$store.getters.getSize(30)" wx:if="guide.condition.showAll" bindtap="showAll('condition')">查看全部</view> -->
              </view>
            </view>
            <!-- /办理条件 -->

            <!-- 办理流程 -->
            <view class="guide-item process" v-if="info.process.child || info.process.content">
              <view class="guide-title" @tap="showDetail" data-type="process">
                <text class="chouse" v-if="guide.process.show">办理流程</text>
                <text v-else>办理流程</text>
                <image src="http://imgbdb3.bendibao.com/whbdb/20213/22/20210322220335_23184.png" mode="widthFix" :class="'arrow ' + (guide.process.show? 'rotate': '')"></image>
              </view>
              <view class="guide-content" v-if="guide.process.show">
                <view v-if="info.process.child" class="content-border">
                  <view class="flex center">
                    <view style="display: inline-block;">
                      <view class="tab-bar flex">
                        <view v-for="(item, index) in info.process.child" :key="index" :class="'bar-item ' + (processIndex == index? 'chouse': '' )" @tap="changeProcessIndex" :data-index="index">
                          <text>{{ item.title }}</text>
                        </view>
                      </view>
                    </view>
                  </view>
                  <view v-for="(process, index) in info.process.child" :key="index" class="process-list" v-if="processIndex == index">
                    <view v-for="(item, index2) in process.content" :key="index2" class="process-item" v-if="guide.process.showAll">
                      <view v-if="index < 3">
                        <!-- <rich-text class="title" :nodes="item.value" wx:if="item.type == 'html'"></rich-text> -->
                        <mp-html v-if="item.type == 'html'" :content="item.value" ref="article" @linktap="linkTap" :copy-link="false" :selectable="true"></mp-html>
                        <text class="preview-img" :data-src="item.value" @tap="previewImage" v-if="item.type == 'image'">查看图片</text>
                      </view>
                    </view>

                    <view v-for="(item, index2) in process.content" :key="index2" class="process-item" v-if="!guide.process.showAll">
                      <!-- <rich-text class="title" :nodes="item.value" wx:if="item.type == 'html'"></rich-text> -->
                      <mp-html v-if="item.type == 'html'" :content="item.value" ref="article" @linktap="linkTap" :copy-link="false" :selectable="true"></mp-html>
                      <text class="preview-img" :data-src="item.value" @tap="previewImage" v-if="item.type == 'image'">查看图片</text>
                    </view>
                  </view>
                </view>
                <view v-else class="content-border">
                  <view class="process-list">
                    <view v-for="(item, index) in info.process.content" :key="index" class="process-item" v-if="guide.process.showAll">
                      <view v-if="index < 3">
                        <!-- <rich-text class="title" :nodes="item.value" wx:if="item.type == 'html'"></rich-text> -->
                        <mp-html v-if="item.type == 'html'" :content="item.value" ref="article" @linktap="linkTap" :copy-link="false" :selectable="true"></mp-html>
                        <text class="preview-img" :data-src="item.value" @tap="previewImage" v-if="item.type == 'image'">查看图片</text>
                      </view>
                    </view>

                    <view v-for="(item, index) in info.process.content" :key="index" class="process-item" v-if="!guide.process.showAll">
                      <view>
                        <!-- <rich-text class="title" :nodes="item.value" wx:if="item.type == 'html'"></rich-text> -->
                        <mp-html v-if="item.type == 'html'" :content="item.value" ref="article" @linktap="linkTap" :copy-link="false" :selectable="true"></mp-html>
                        <text class="preview-img" :data-src="item.value" @tap="previewImage" v-if="item.type == 'image'">查看图片</text>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="show-all" v-if="guide.process.showAll" @tap="showAll" data-type="process">查看全部
                </view>
              </view>
            </view>
            <!-- /办理流程 -->

            <!-- 办理费用及时限 -->
            <view class="guide-item time-cost" v-if="info.timeCost.content">
              <view class="guide-title" @tap="showDetail" data-type="timeCost">
                <text class="chouse" v-if="guide.timeCost.show">办理费用及时限</text>
                <text v-else>办理费用及时限</text>
                <image src="http://imgbdb3.bendibao.com/whbdb/20213/22/20210322220335_23184.png" mode="widthFix" :class="'arrow ' + ( guide.timeCost.show? 'rotate':  '')"></image>
              </view>
              <view class="guide-content" v-if="guide.timeCost.show">
                <!-- <view class="condition-detail" wx:for="(item, index) in info.timeCost.content" wx:key="index" wx:if="guide.timeCost.showAll">
							<view wx:if="index < 3"><rich-text :nodes="item.value"></rich-text></view>
						</view> -->

                <!-- <view class="condition-detail" wx:for="(item, index) in info.timeCost.content" wx:key="index" wx:if="!guide.timeCost.showAll">
							<rich-text :nodes="item.value"></rich-text>
						</view> -->
                <view v-for="(item, index) in info.timeCost.content" :key="index" class="condition-border">
                  <!-- <rich-text :nodes="item.value"></rich-text> -->
                  <mp-html :content="item.value" ref="article" @linktap="linkTap" :copy-link="false" :selectable="true"></mp-html>
                </view>
                <!-- <view class="show-all" class="$store.getters.getSize(30)" wx:if="guide.timeCost.showAll" bindtap="showAll('timeCost')">查看全部</view> -->
              </view>
            </view>
            <!-- /办理费用及时限 -->

            <!-- 办理地点 -->
            <view class="guide-item local" v-if="webInfo.length">
              <view class="guide-title" @tap="showDetail" data-type="local">
                <text class="chouse" v-if="guide.local.show">办理地点</text>
                <text v-else>办理地点</text>
                <image src="http://imgbdb3.bendibao.com/whbdb/20213/22/20210322220335_23184.png" mode="widthFix" :class="'arrow ' + (guide.local.show? 'rotate':'' )"></image>
              </view>
              <view class="guide-content" v-if="guide.local.show">
                <view class="info-list">
                  <view v-for="(item, index) in webInfo" :key="index" class="info-item" @tap="toWebDetail" :data-index="index">
                    <view class="info-title">{{ item.com_name }}</view>
                    <view class="border flex between">
                      <view class="info flex col align-start">
                        <view class="base flex">
                          <view class="distance">{{item.distance}}</view>
                          <view class="addr text-over">{{item.com_addr}}</view>
                        </view>
                        <view class="local" v-if="item.classname">
                          <image src="http://imgbdb3.bendibao.com/whbdb/202012/3/20201203113324_24608.png" mode>
                          </image>
                          <text>{{ item.classname }}</text>
                        </view>
                        <view class="time" v-if="item.com_yytime">
                          <image src="http://imgbdb3.bendibao.com/whbdb/202012/3/20201203112840_58950.jpg" mode>
                          </image>
                          {{ item.com_yytime }}
                        </view>
                      </view>
                      <!-- <view class="control flex">
										<image src="http://imgbdb3.bendibao.com/whbdb/202012/2/20201202181224_15478.png" mode="" bindtap="shwoDetail(index)"></image>
										<image src="http://imgbdb3.bendibao.com/whbdb/202012/2/20201202181246_36743.png" mode="" bindtap="navigator(index)"></image>
									</view> -->
                    </view>
                  </view>
                </view>
                <view class="show-all" @tap="showAllWebInfo" :data-keywords="keywords">查看全部</view>
              </view>
            </view>
            <!-- /办理地点 -->

            <!-- 常见问题 -->
            <view class="guide-item question" v-if="info.questions.child">
              <view class="guide-title" @tap="showDetail" data-type="question">
                <text class="chouse" v-if="guide.question.show">常见问题</text>
                <text v-else>常见问题</text>
                <image src="http://imgbdb3.bendibao.com/whbdb/20213/22/20210322220335_23184.png" mode="widthFix" :class="'arrow ' + ( guide.question.show?'rotate': '')"></image>
              </view>
              <view class="guide-content" v-if="guide.question.show">
                <view class="question-list">
                  <view v-for="(item, index) in info.questions.child" :key="index" class="question-item" v-if="guide.question.showAll && index < 5">
                    <view class="question-border">
                      <view class="title flex">
                        <image src="http://imgbdb3.bendibao.com/whbdb/20213/22/20210322220405_15716.png" class="question-icon" mode="widthFix"></image>
                        <text>{{ item.title }}</text>
                      </view>
                      <view class="question-content">
                        <!-- <rich-text :nodes="content.value" wx:for="(content, index) in item.content"></rich-text> -->
                        <mp-html v-for="(content, index2) in item.content" :key="index2" :content="content.value" ref="article" @linktap="linkTap" :copy-link="false" :selectable="true"></mp-html>
                      </view>
                    </view>
                  </view>
                  <view v-for="(item, index) in info.questions.child" :key="index" class="question-item" v-if="!guide.question.showAll && item.title">
                    <view class="question-border">
                      <view class="title flex">
                        <image src="http://imgbdb3.bendibao.com/whbdb/20213/22/20210322220405_15716.png" class="question-icon" mode="widthFix"></image>
                        <text>{{ item.title }}</text>
                      </view>
                      <view class="question-content">
                        <!-- <rich-text :nodes="content.value" wx:for="(content, index) in item.content"></rich-text> -->
                        <mp-html v-for="(content, index2) in item.content" :key="index2" :content="content.value" ref="article" @linktap="linkTap" :copy-link="false" :selectable="true"></mp-html>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="show-all" v-if="guide.question.showAll" @tap="showAll" data-type="question">查看全部
                </view>
              </view>
            </view>
            <!-- /常见问题 -->
          </block>
          <block v-else>
            <view style="text-align:center;margin-top:150rpx">没有找到相关信息哦~</view>
          </block>
        </view>
        <!-- /办事指南列表-->

        <!-- 材料清单 -->
        <view class="material-list" v-if="infoIndex == 1">
          <block v-if="materialList.child&&materialList.child.length!=0">
            <view v-for="(item, index) in materialList.child" :key="index" class="material-item flex between">
              <view class="title">{{ item.title }}</view>
              <view class="detail" @tap="showMaterialDetail" :data-index="index">详情</view>
            </view>
          </block>
          <block v-else>
            <view style="text-align:center;margin-top:150rpx">没有找到相关信息哦~</view>
          </block>
        </view>
        <!-- /材料清单 -->

        <!-- TODO 底部工具栏 -->
        <!-- /底部工具栏 -->
      </view>
      <!-- /内容主体部分 -->
    </view>
    <!-- 反馈 -->
    <view class="feedback" v-if="feedbackInfo[workTypeName]">
      <image class="usefull" :src="feedbackInfo[workTypeName].usefull==0?'http://imgbdb3.bendibao.com/xcxbdb/file/20214/13/20210413140111_54329.jpeg':'http://imgbdb3.bendibao.com/xcxbdb/file/20214/13/20210413140056_77983.jpeg'" mode="widthFix" data-type="usefull" @tap="feedback"></image>
      <image class="useless" :src="feedbackInfo[workTypeName].useless==0?'http://imgbdb3.bendibao.com/xcxbdb/file/20214/13/20210413140155_79110.jpeg':'http://imgbdb3.bendibao.com/xcxbdb/file/20214/13/20210413140124_94672.jpeg'" mode="widthFix" data-type="useless" @tap="feedback"></image>
    </view>
    <!-- /反馈 -->
  </view>
</view>
<!-- 弹窗 -->
<mp-dialog :show="showDetail" :buttons="[{text: '关闭'}]" @buttontap="tapDialogButton" ext-class="dialog">
  <block v-if="materialList.child">
    <view v-for="(item, index) in materialList.child[materialIndex].content" :key="index" class="content-box">
      <mp-html :content="item.value" ref="article" @linktap="linkTap" :copy-link="false" :selectable="true">
      </mp-html>
    </view>
  </block>
</mp-dialog>
<!-- /弹窗 -->
<!-- 没帮助 -->
<mp-half-screen-dialog @buttontap="buttontap" :show="showHalfDialog" :closabled="false" extClass="halfScreen">
  <view slot="title">
    <view class="control flex align-center between">
      <view class="cancel" @tap="cancel">取消</view>
      <view class="confirm" @tap="confirm">确认</view>
    </view>
  </view>
  <view slot="desc">
    <view class="feedback-pop">
      <view class="feedback-content ">
        <view class="title">没帮助的原因是</view>
        <view class="list">
          <radio-group name="feedback" @change="feedbackChange">
            <label v-for="(item, index) in uselessList" :key="index" class="item flex between align-center">
              <text>{{ item }}</text>
              <radio :value="index"></radio>
            </label>
          </radio-group>
        </view>
        <view class="text-area" v-if="feedbackInfo[workTypeName]">
          <textarea @input="input" v-if="feedbackInfo[workTypeName].showTextarea" class="textarea" placeholder="在这里备注你的具体问题，字数限制在500个以内" maxlength="500"></textarea>
          </view>
				</view>
			</view>
</view>
</mp-half-screen-dialog>
</view>
</template>

<script>
// pages/tools/work-strategy/work-strategy.js
const util = require("../../../utils/util.js");
var QQMapWX = require("../../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js");
var qqmapsdk = new QQMapWX({
  key: 'KR7BZ-XSQ3P-VGFD7-LNRZL-E7PXE-STF76'
});
let page = 1;
const app = getApp();
import mpHtml from "../../../component/mp-html/index";
import mpDialog from "./weui-miniprogram/dialog/dialog";
import mpHalfScreenDialog from "./weui-miniprogram/half-screen-dialog/half-screen-dialog";

export default {
  data() {
    return {
      citycode: "sz",
      // 城市代码
      workName: "",
      // 办事项目名称，默认身份证
      infoIndex: 0,
      // 办事指南、材料清单索引
      workType: [],
      // 办事子项目列表
      workTypeIndex: 0,
      // workType索引
      processIndex: 0,
      // 办理流程tabBar索引
      guide: {
        condition: {
          show: false,
          showAll: true
        },
        process: {
          show: false,
          showAll: true
        },
        timeCost: {
          show: false,
          showAll: true
        },
        local: {
          show: false,
          showAll: true
        },
        question: {
          show: false,
          showAll: true
        }
      },
      // 办事指南列表折叠控制
      info: {
        condition: {},
        process: [],
        timeCost: {},
        questions: []
      },
      webInfo: [],
      // 网点信息
      materialList: {},
      // 清单列表,
      citylist: [],
      cityIndex: 0,
      keywords: "",
      // 网点查询关键字
      mainWd: "",
      // 总网点类型名称
      cityname: "深圳市",
      // 网点查询使用的城市名称
      selectable: true,
      num: "",
      // 数据长度限制，通过options接受，传递给接口
      links: [],
      // 链接列表
      materialIndex: 0,
      // 材料清单索引
      showDetail: false,
      uselessList: ["办理流程篇幅太长，记不住", "办理条件用词太专业，看不懂", "办理地点有问题", "常见问答没有回答我的问题", "以上都不是"],
      feedbackInfo: {},
      showHalfDialog: false,
      buttons: [{
        type: 'default',
        className: '',
        text: '取消',
        value: 0
      }, {
        type: 'primary',
        className: '',
        text: '确认',
        value: 1
      }],
      lat: "",
      lnt: "",
      cityId: "",
      address: [],
      mianWd: "",
      workTypeName: ""
    };
  },

  components: {
    mpHtml,
    mpDialog,
    mpHalfScreenDialog
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      workName: options.name ? options.name : "身份证",
      num: options.num ? options.num : "",
      citycode: options.city || uni.getStorageSync("citycode")
    });
    util.getUrl(app.globalData.url).then(e => {
      qqmapsdk.reverseGeocoder({
        type: 'wgs84',
        success: res => {
          const lat = res.result.location.lat;
          const lnt = res.result.location.lng;
          this.setData({
            lat,
            lnt
          });
          this.getInfo();
        }
      });
    });
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: `本地宝-${this.cityname}-${this.workName}-办事`,
      path: `/pages/tools/work-strategy/work-strategy?name=${this.workName}&num=${this.num}&citycode=${this.citycode}`
    };
  },
  methods: {
    tapDialogButton() {
      this.setData({
        showDetail: false
      });
    },

    open() {
      this.setData({
        showHalfDialog: true
      });
    },

    /**
     * 确定没帮助
     * @method confirm
     */
    confirm() {
      let type = this.feedbackInfo[this.workTypeName];

      if (type.uselessIndex === "") {
        uni.showToast({
          title: "请选择原因",
          icon: "none"
        });
      } else {
        util.request("wenti.php", {
          action: "add",
          laiyuan: `WX-${this.cityname}-${this.workName}-${this.workType[this.workTypeIndex].title}`,
          type: "没帮助",
          result: this.uselessList[type.uselessIndex],
          remark: type.feedbackContent,
          publictime: new Date().getTime()
        }, "POST").then(res => {
          uni.showToast({
            title: "已收到您的反馈，感谢您的参与",
            icon: "none",
            success: () => {
              type.useless = 1;
              type.hasFeedback = true;
              this.setData({
                showHalfDialog: false,
                feedbackInfo: this.feedbackInfo
              });
            }
          });
        });
      }
    },

    /**
     * 没帮助原因选择
     * @method feedbackChange
     * @param {Evnet} e
     */
    feedbackChange(e) {
      let index = e.detail.value; // 选择以上都不是时，展示textarea

      if (index == 4) {
        this.feedbackInfo[this.workTypeName].showTextarea = true;
      } else {
        this.feedbackInfo[this.workTypeName].showTextarea = false;
      }

      this.feedbackInfo[this.workTypeName].uselessIndex = index;
      this.setData({
        feedbackInfo: this.feedbackInfo
      });
    },

    input(e) {
      this.feedbackInfo[this.workTypeName].feedbackContent = e.detail.value;
      this.setData({
        feedbackInfo: this.feedbackInfo
      });
    },

    /**
     * 取消没帮助
     * @method cancel
     */
    cancel() {
      this.setData({
        showHalfDialog: false
      });
    },

    /**
     * 有帮助/没帮助按钮切换事件
     * @method feedback
     * @param {string} type 按钮类型
     */
    feedback(e) {
      let type = util.getValue('type', e);
      let feedType = this.feedbackInfo[this.workTypeName];

      if (feedType.hasFeedback) {
        uni.showToast({
          title: "请不要重复提交",
          icon: "none"
        });
      } else {
        if (type === "usefull") {
          feedType.usefull = ~feedType.usefull + 2;
          this.setData({
            feedbackInfo: this.feedbackInfo
          }); // 第一次选择有帮助时，发送请求

          if (feedType.firstUsefull) {
            util.request("wenti.php", {
              action: "add",
              laiyuan: `WX-${this.cityname}-${this.workName}-${this.workType[this.workTypeIndex].title}`,
              type: "有帮助",
              result: "",
              remark: "",
              publictime: new Date().getTime()
            }, "POST").then(res => {
              feedType.firstUsefull = false;
              this.setData({
                feedbackInfo: this.feedbackInfo
              });
            });
          }
        } else if (type === "useless") {
          feedType.usefull = 0;
          this.open();
          this.setData({
            feedbackInfo: this.feedbackInfo
          });
        }
      }
    },

    /**
     * 获取信息
     * @method getInfo
     */
    getInfo() {
      util.request("banshi.php", {
        // citycode: this.citycode,
        citycode: this.citycode,
        name: this.workName,
        num: this.num,
        time: new Date().getTime()
      }, "GET").then(res => {
        if (res.data.state === 1) {
          this.setData({
            cityId: res.data.data.cityid
          });

          if (res.data.data.citylist) {
            let citylist = [];

            for (let key in res.data.data.citylist) {
              citylist.push({
                cityid: key,
                cityname: res.data.data.citylist[key]
              });
            }

            this.cityIndex = citylist.findIndex(city => city.cityid === this.citycode);
            this.setData({
              citylist,
              cityIndex: this.cityIndex
            });
          }

          if (res.data.data.city) {
            this.setData({
              cityname: res.data.data.city,
              address: ["", this.cityname, "全部"]
            });
          }

          this.setData({
            mianWd: res.data.data.wd,
            workType: res.data.data.subject,
            workTypeName: res.data.data.subject[this.workTypeIndex].title
          });
          this.workType.forEach(item => {
            Object.defineProperty(this.feedbackInfo, item.title, {
              value: {
                usefull: 0,
                useless: 0,
                feedbackContent: "",
                // 备注,
                hasFeedback: false,
                // 判断是否已经反馈
                firstUsefull: true,
                // 判断是否是第一次选择有帮助，重复选择只提交一次请求
                uselessIndex: "",
                showTextarea: false
              },
              enumerable: true,
              writable: true,
              configurable: true
            });
          });
          this.setData({
            feedbackInfo: this.feedbackInfo
          }); // 如果当前项目网点类型与主类型一致，使用主类型请求，否则使用当前项目网点类型请求;

          if (this.workType[this.workTypeIndex].wd === res.data.data.wd) {
            this.getWebInfo(res.data.data.wd);
          } else {
            this.getWebInfo(this.workType[this.workTypeIndex].wd);
          }

          this.showData();
        } else {
          this.workType = [];
          this.materialList = [];
          Object.keys(this.info).forEach(item => {
            this.info[item].content = [];
            this.info[item].child = [];
          });
          this.setData({
            workType: this.workType,
            materialList: this.materialList,
            info: this.info
          });
        }
      }).catch(err => {
        console.log(err);
        uni.showToast({
          title: "当前城市暂无数据",
          icon: "none"
        });
      });
    },

    /**
     * 展示页面数据
     * @method showData
     */
    showData() {
      let workInfo = this.workType[this.workTypeIndex].block;
      let workType = [{
        name: "办理条件",
        key: "condition"
      }, {
        name: "办理流程",
        key: "process"
      }, {
        name: "办理时限与费用/办理时限及费用",
        key: "timeCost"
      }, {
        name: "常见问答/常见问题",
        key: "questions"
      }];
      workType.forEach(item => this.info[item.key] = this.getGuideInfo(item.name, workInfo));
      this.setData({
        materialList: this.getGuideInfo("办理材料", workInfo)
      });

      if (this.materialList.child) {
        this.materialList.child.forEach(item => {
          if (item.content) {
            item.content.forEach(link => {
              if (link.links.length > 0) {
                this.setData({
                  links: [...this.links, ...link.links]
                });
              }
            });
          }
        });
      }

      if (this.materialList.content) {
        this.materialList.content.forEach(item => {
          if (item.links.length) {
            this.setData({
              links: [...this.links, ...item.links]
            });
          }
        });
      }

      this.setData({
        materialList: this.materialList
      });

      for (let type in this.info) {
        if (this.info[type].content) {
          let content = this.info[type].content;
          content.forEach(item => {
            if (item.links.length > 0) {
              let links = item.links;
              this.setData({
                links: [...this.links, ...links]
              });
            }
          });
        }

        if (type === "process") {
          if (this.info[type].child) {
            this.info[type].child.forEach(item => {
              item.content.forEach(item => {
                this.setData({
                  links: [...this.links, ...item.links]
                });
              });
            });
          }
        }

        if (type === "questions") {
          if (this.info[type].child) {
            this.info[type].child.forEach(item => {
              if (item.content) {
                item.content.forEach(link => {
                  if (link.links.length > 0) {
                    this.setData({
                      links: [...this.links, ...link.links]
                    });
                  }
                });
              }
            });
          }
        }

        this.setData({
          info: this.info
        });
      }
    },

    /**
     * 获取网点信息
     * @method getWebInfo
     * @param {string} [keywords] 网点名称
     */
    getWebInfo(keywords) {
      // 当前网点类型与主类型一致，不请求数据，否则请求数据;
      if (keywords) {
        this.setData({
          keywords
        });
        let data = {
          city: this.cityname,
          county: "全部",
          type: 3,
          keywords,
          lat: this.lat,
          lnt: this.lnt,
          page,
          size: 5,
          action: "search"
        };
        util.request("network.php", data, "POST").then(res => {
          if (res.data.state == 1) {
            if (this.webInfo.length <= res.data.count) {
              res.data.data.search.forEach(item => {
                if (item.distance) {
                  if (item.distance < 1) item.distance = `${(parseFloat(item.distance) * 1000).toFixed(0)}米`;else item.distance = `${parseFloat(item.distance).toFixed(2)}公里`;
                }
              });
              this.webInfo = res.data.data.search.slice(0, 2);
              this.setData({
                webInfo: this.webInfo
              });
            }
          }
        });
      } else {
        if (this.workType[this.workTypeIndex].wd !== this.mianWd) {
          this.getWebInfo(this.workType[this.workTypeIndex].wd);
        } else if (!this.workType[this.workTypeIndex].wd) {
          this.webInfo = [];
          this.setData({
            webInfo: this.webInfo
          });
        }
      }
    },

    /**
     * 获取对应列表数据（例如：办理条件、办理流程等）
     * @method getGuideInfo
     * @param {string} name 流程名称
     * @param {object} workInfo 当前项目数据
     * @return {object} 返回对应项目数据
     */
    getGuideInfo(name, workInfo) {
      return workInfo.filter(guide => name.includes(guide.title)).length ? workInfo.filter(guide => name.includes(guide.title))[0] : "";
    },

    /**
     * 顶部导航栏切换事件
     * @method changeType
     * @param {string} index 顶部导航栏索引
     * @param {string} id 子项目id
     */
    changeType(e) {
      for (let key in this.guide) {
        this.guide[key].showAll = true;
        this.guide[key].show = false;
      }

      this.setData({
        guide: this.guide
      });
      let index = util.getValue('index', e);
      this.setData({
        workTypeIndex: index,
        processIndex: 0,
        workTypeName: this.workType[index].title
      });
      this.showData();
      this.getWebInfo();
    },

    /**
     * 切换办事指南和材料清单
     * @method changeInfoIndex
     * @param {string} index 办事指南和材料清单索引
     */
    changeInfoIndex(e) {
      let index = util.getValue('index', e);
      this.setData({
        infoIndex: index
      });
    },

    /**
     * 展开办事指南列表详细信息
     * @method showDetail
     * @param {string} type 办事指南名称
     */
    showDetail(e) {
      let type = util.getValue('type', e);
      this.guide[type].show = !this.guide[type].show;
      this.setData({
        guide: this.guide
      });
    },

    /**
     * 切换网上办理、现场办理
     * @method changeProcessIndex
     * @param {string} index 网上办理、现场办理索引
     */
    changeProcessIndex(e) {
      let index = util.getValue('index', e);
      this.setData({
        processIndex: index
      });
    },

    /**
     * 展示全部信息
     * @method showAll
     * @par1am {string} type 办事指南名称
     */
    showAll(e) {
      let type = util.getValue('type', e);
      this.guide[type].showAll = false;
      this.setData({
        guide: this.guide
      });
    },

    /**
     * 城市选择pciker
     * @method pickCity
     */
    pickCity(e) {
      this.cityIndex = e.detail.value;
      this.citycode = this.citylist[e.detail.value].cityid;
      this.setData({
        cityIndex: this.cityIndex,
        citycode: this.citycode
      });
      this.getInfo();
    },

    /**
     * 查看网点详情
     * @method toWebDetail
     * @param {string} index 网点索引
     */
    toWebDetail(e) {
      let index = util.getValue('index', e);
      uni.navigateTo({
        url: `/pages/tools/wangdian/detail/detail?detailId=${this.webInfo[index].id}`
      });
    },

    /**
     * 隐藏问答内容
     * @method showQuestionContent
     * @param {striong} index 问答索引
     * @tips 暂时不做此功能
     */

    /* showQuestionContent(index) {
    	this.questions[index].ellipsis = false;
    }, */

    /**
     * 展示材料清单详情
     * @method showMaterialDetail
     * @param {string} index 材料清单索引
     */
    showMaterialDetail(e) {
      let index = util.getValue('index', e);
      this.setData({
        materialIndex: index,
        showDetail: true
      });
    },

    /**
     * 预览图片
     * @method previewImage
     * @param {string} src 图片链接
     */
    previewImage(e) {
      let src = util.getValue('src', e);
      uni.previewImage({
        current: src,
        urls: [src]
      });
    },

    /**
     * 展示全部网点信息
     * @method showAllWebInfo
     * @param {string} keywords 网点名称
     */
    showAllWebInfo(e) {
      let keywords = util.getValue('keywords', e);
      uni.navigateTo({
        url: `/pages/tools/wangdian/select/select?keywords=${keywords}&type=1&provinceName=默认&cityName=${this.cityname}&districtName=全部&cityCode=${this.citycode}`
      });
    },

    /**
     * 文章内连接点击事件
     * @method htmlLink
     * @param {Object} res 组件返回对象
     */
    linkTap(res) {
      let url = res.detail.href;
      let linkInfo = this.links.filter(link => link.url === url);
      linkInfo.length && linkInfo[0].id ? uni.navigateTo({
        url: `/pages/article/detail/detail?id=${linkInfo[0].id}&city=${linkInfo[0].city}&type=${linkInfo[0].type}`
      }) : util.navContact(url, url);
    },

    buttontap() {
      console.log("占位：函数 buttontap 未声明");
    }

  }
};
</script>
<style>
.body {
  font-size: 30rpx;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

text {
  font-size: 30rpx;
}

.body .popup {
  margin: 0 44rpx;
  padding: 26rpx;
  color: #7a7a7a;
  border-radius: 12rpx;
  background-color: #fff;
}

.body .feedback {
  text-align: center;
  margin-top: 180rpx;
}

.body .feedback .usefull,
.body .feedback .useless {
  width: 189rpx;
}

.body .head {
  padding: 41rpx 28rpx;
  border-bottom: 16rpx solid #f4f4f4;
}

.body .head .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 33rpx;
}

.body .head .title .title-text {
  font-weight: bold;
  font-size: 50rpx;
}

.body .head .title .city {
  height: 55rpx;
  width: 143rpx;
  border-radius: 10rpx;
  border: 2rpx solid rgba(67, 147, 244, 0.8);
  line-height: 55rpx;
  text-align: center;
  font-weight: bold;
  color: #4393f4;
}

.body .head .title .city .city-icon {
  width: 25rpx;
  margin-right: 16rpx;
}

.body .head .tab-bar {
  overflow-x: scroll;
  font-size: 30rpx;
}

.body .head .tab-bar .bar-item {
  flex: 1;
  margin-right: 33rpx;
  text-align: center;
  white-space: nowrap;
}

.body .head .tab-bar .chouse {
  height: 61rpx;
  padding: 0 18rpx;
  margin-right: 36rpx;
  border-radius: 8rpx;
  line-height: 61rpx;
  font-weight: bold;
  color: #4393f4;
  background-color: #ebf4fb;
  font-size: 32rpx;
}

.body .main-box {
  margin-top: 26rpx;
}

.body .main-box .chouse {
  font-weight: bold;
  color: #4393f4;
}

.body .main-box .tab-bar {
  justify-content: space-around;
  margin-bottom: 27rpx;
  border-bottom: 1rpx solid #dedede;
  font-size: 30rpx;
}

.body .main-box .tab-bar .bar-item {
  padding-bottom: 26rpx;
  color: #666;
  font-size: 30rpx;
}

.body .main-box .tab-bar .chouse {
  color: #4393f4;
  border-bottom: 6rpx solid #4393f4;
  font-size: 32rpx;
}

.body .main-box .guide-list .guide-item {
  margin-left: 32rpx;
  border-bottom: 1rpx solid #dedede;
  padding-bottom: 23rpx;
  margin-bottom: 26rpx;
}

.body .main-box .guide-list .guide-item .guide-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 32rpx;
}

.body .main-box .guide-list .guide-item .guide-title .arrow {
  width: 21rpx;
  margin-right: 34rpx;
}

.body .main-box .guide-list .guide-item .guide-title .rotate {
  transform: rotate(-180deg);
}

.body .main-box .guide-list .guide-item .guide-content {
  padding-right: 28rpx;
  margin-top: 28rpx;
  line-height: 50rpx;
  color: #666;
  word-break: break-all;
}

.body .main-box .guide-list .guide-item .guide-content .show-all {
  padding: 25rpx 0;
  padding-bottom: 0;
  margin-top: 25rpx;
  border-top: 1rpx solid #dedede;
  text-align: center;
}

.body .main-box .guide-list .condition .condition-detail .index,
.body .main-box .guide-list .time-cost .condition-detail .index {
  display: inline-block;
  width: 28rpx;
  height: 28rpx;
  border-radius: 50%;
  line-height: 26rpx;
  text-align: center;
  color: #fff;
  background-color: #666;
}

.body .main-box .guide-list .process .guide-content .tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 9rpx 20rpx;
  border-radius: 8rpx;
  border: 1rpx solid #c4c4c4;
  overflow-x: scroll;
  box-sizing: border-box;
}

.body .main-box .guide-list .process .guide-content .tab-bar .bar-item {
  margin-right: 63rpx;
  padding: 0;
  font-size: 30rpx;
}

.body .main-box .guide-list .process .guide-content .tab-bar .bar-item:last-child {
  margin-right: 0;
}

.body .main-box .guide-list .process .guide-content .tab-bar .chouse {
  border: none;
  padding: 0;
  font-size: 32rpx;
}

.body .main-box .guide-list .process .process-list {
  align-items: flex-start;
}

.body .main-box .guide-list .process .process-list .process-item .preview-img {
  display: inline-block;
  margin-bottom: 16rpx;
  color: #4a97f4;
  font-size: 30rpx;
}

.body .main-box .guide-list .local .guide-content .info-list .info-item {
  padding-bottom: 42rpx;
  margin-bottom: 46rpx;
  border-bottom: 2rpx solid #f1f1f1;
}

.body .main-box .guide-list .local .guide-content .info-list .info-item .info-title {
  width: 85%;
  margin-bottom: 8rpx;
  color: #252525;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
  font-size: 32rpx;
}

.body .main-box .guide-list .local .guide-content .info-list .info-item .border .info {
  overflow: hidden;
  align-items: flex-start;
}

.body .main-box .guide-list .local .guide-content .info-list .info-item .border .info image {
  width: 20rpx;
  height: 22rpx;
  margin-right: 20rpx;
}

.body .main-box .guide-list .local .guide-content .info-list .info-item .border .info .base {
  width: 100%;
  margin-bottom: 22rpx;
}

.body .main-box .guide-list .local .guide-content .info-list .info-item .border .info .base .distance {
  padding-right: 20rpx;
  margin-right: 22rpx;
  border-right: 2rpx solid #cbcbcb;
  white-space: nowrap;
}

.body .main-box .guide-list .local .guide-content .info-list .info-item .border .info .base .time {
  margin-top: 8rpx;
  white-space: normal;
}

.body .main-box .guide-list .question {
  margin-left: 32rpx;
}

.body .main-box .guide-list .question .guide-content .question-list .question-item .question-border {
  padding-right: 34rpx;
  padding-bottom: 40rpx;
  margin-bottom: 34rpx;
  border-bottom: 1rpx solid #dedede;
}

.body .main-box .guide-list .question .guide-content .question-list .question-item .question-border .question-content {
  padding-left: 16rpx;
  font-size: 28rpx;
}

.body .main-box .guide-list .question .guide-content .question-list .question-item .question-border .title {
  margin-bottom: 21rpx;
  font-weight: bold;
}

.body .main-box .guide-list .question .guide-content .question-list .question-item .question-border .title .question-icon {
  width: 38rpx;
  margin-right: 20rpx;
  margin-left: 8rpx;
}

.body .main-box .guide-list .question .guide-content .question-list .question-item:last-child .question-border {
  margin-bottom: 0;
  padding-bottom: 0;
  border: none;
}

.body .main-box .guide-list .question .guide-content .show-all {
  padding-bottom: 0;
}

.body .main-box .material-list {
  margin-left: 27rpx;
}

.body .main-box .material-list .material-item {
  justify-content: space-between;
  margin-bottom: 26rpx;
  padding-bottom: 26rpx;
  padding-right: 43rpx;
  border-bottom: 1rpx solid #dedede;
}

.body .main-box .material-list .material-item .title {
  margin-right: 60rpx;
  font-size: 30rpx;
}

.body .main-box .material-list .material-item .detail {
  flex-shrink: 0;
  color: #4393f4;
  font-size: 24rpx;
}

.content-box {
  text-align: left;
  font-size: 30rpx;
  line-height: 50rpx;
}

.feedback-pop {
  background-color: #fff;
}

.control {
  padding: 34rpx 37rpx;
  margin-bottom: 29rpx;
  border-bottom: 6rpx solid #f7f7f7;
  justify-content: space-between;
  align-items: center;
  font-size: 36rpx;
}

.control .cancel {
  color: #c0c0c0;
}

 .control .confirm {
  color: #4393f4;
}

.feedback-pop .feedback-content .title {
  padding: 0 36rpx;
  margin-bottom: 53rpx;
  font-weight: bold;
  font-size: 34rpx;
}

.feedback-pop .feedback-content .list {
  padding: 0 45rpx;
}

.feedback-pop .feedback-content .list .item {
  padding-bottom: 36rpx;
  margin-bottom: 36rpx;
  border-bottom: 2rpx solid #f7f7f7;
  align-items: center;
  justify-content: space-between;
}

.feedback-pop .feedback-content .list .item:last-child {
  margin-bottom: 0;
  border: none;
}

.feedback-pop .feedback-content .text-area {
  padding-top: 22rpx;
  padding-left: 61rpx;
  background-color: #fafafa;
}
.textarea{
  font-size: 30rpx;
}
radio .wx-radio-input {
  border: none;
  background-color: #fff !important;
}
radio .wx-radio-input .wx-radio-input-checked {
  border: none;
  color: #4393f4;
  background-color: #fff;
}
wx-radio .wx-radio-input.wx-radio-input-checked:before {
  border: none;
  color: #4393f4;
  font-size: 52rpx;
}
.halfScreen{
 padding: 0;
 max-height: 80%;
}
.weui-half-screen-dialog__ft {
  padding: 0;
}
.weui-half-screen-dialog__bd{
  padding-bottom: 0;
}
</style>